<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Single-page</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="/js/jquery.min.js"></script>
    <!-- <script src="../js/jquery.js"></script>-->
    <script src="/bootstrapt/js/bootstrap.js"></script>
    <!-- <link rel="stylesheet" href="../bootstrapt/css/bootstrap.css"/>-->
    <link rel="stylesheet" href="/css/simpleorder.css" type="text/css" media="all"/>


    <!--webfont-->
    <link rel="stylesheet" href="/css/etalage.css">
    <link rel="stylesheet" href="/css/commentpaging.css">
    <link rel="stylesheet" href="/css/roomsbox.css">
    <link rel="stylesheet" href="/css/shortcode.css">

    <script src="/js/jquery.etalage.min.js"></script>
    <!--评论分页-->
    <script src="/js/CommentPage.js"></script>

    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Custom styles for this template -->
    <link href="/css/style.css" rel="stylesheet">
    <link href="/fonts/antonio-exotic/stylesheet.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/lightbox.min.css">
    <link href="/css/responsive.css" rel="stylesheet">
    <link href="/libraries/lib.css" rel="stylesheet">

    <!-- date -->
    <link rel="stylesheet" type="text/css" href="style2.css">

    <!-- <script src="js1/jquery.min.js"></script> -->

    <script src="/libraries/lib.js"></script>

    <script src="/js1/functions.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            $('#etalage').etalage({
                thumb_image_width: 600,
                thumb_image_height: 400,
                source_image_width: 800,
                source_image_height: 1000,
                show_hint: true,
                click_callback: function (image_anchor, instance_id) {
                    alert('Callback example:\nYou clicked on an image with the anchor: "' + image_anchor + '"\n(in Etalage instance: "' + instance_id + '")');
                }
            });

        });

        function addcart(aaa) {

            $.ajax({
                url: "/findLogin",
                success: function (data) {
                    if (data == "") {
                        var result = confirm("没有登录，不能操作，是否跳转登录界面")
                        if (result) {
                            location.href = "/login"
                        } else {

                        }

                    } else {
                        var plan_stay_time = $("#stay_time" + aaa).val()    //计划住房时间
                        var plan_leave_time = $("#leave_time" + aaa).val()    //计划退房时间
                        if (plan_stay_time == "") {
                            alert("请选择入住时间")
                        } else {
                            if (plan_leave_time == "") {
                                alert("请选择退房时间")
                            } else {
                                var start = new Date(plan_stay_time.replace("-", "/").replace("-", "/"));
                                var end = new Date(plan_leave_time.replace("-", "/").replace("-", "/"));
                                if (end < start) {
                                    alert('结束日期不能小于开始日期！');
                                } else {
                                    var myDate = Date.now()
                                    var date = new Date(myDate);
                                    var year = date.getFullYear();
                                    var month = date.getMonth()+1;
                                    var day = date.getDate();
                                    month = month < 10 ? "0"+month:month;
                                    day = day < 10 ? "0"+day:day;
                                    var time  = month+'/'+day+'/'+year;
                                    var vvv = time.replace("/","")
                                    var vvb = plan_stay_time.replace("/","")
                                    var e = parseInt(vvv)
                                    var m = parseInt(vvb)
                                    if (e > m) {
                                        alert("选择正确的入住日期")
                                    } else {
                                        $.ajax({
                                            url: "/cart/add",
                                            data: {
                                                room_type_id: aaa,
                                                plan_stay_time: plan_stay_time,
                                                plan_leave_time: plan_leave_time
                                            },
                                            success: function (data) {
                                                alert(data)
                                            }
                                        })
                                    }

                                }
                            }
                        }
                    }
                }
            })


        }

        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }

        function orderthis(aaa, name, price, id) {
            $.ajax({
                url: "/findLogin",
                success: function (data) {
                    if (data == "") {
                        var result = confirm("没有登录，不能操作，是否跳转登录界面")
                        if (result) {
                            location.href = "/login"
                        } else {

                        }

                    } else {
                        //发送ajax去后台获取到用户的会员级别，享受折扣
                        var plan_stay_time = $("#stay_time" + aaa).val()    //计划住房时间
                        var plan_leave_time = $("#leave_time" + aaa).val()    //计划退房时间

                        if (plan_stay_time == "") {
                            alert("请选择入住时间")
                        } else if (plan_leave_time == "") {
                            alert("请选择退房时间")
                        } else {
                            var start = new Date(plan_stay_time.replace("-", "/").replace("-", "/"));
                            var end = new Date(plan_leave_time.replace("-", "/").replace("-", "/"));
                            if (end < start) {
                                alert('结束日期不能小于开始日期！');
                            } else {
                                var myDate = Date.now()
                                var date = new Date(myDate);
                                var year = date.getFullYear();
                                var month = date.getMonth()+1;
                                var day = date.getDate();
                                month = month < 10 ? "0"+month:month;
                                day = day < 10 ? "0"+day:day;
                                var time  = month+'/'+day+'/'+year;
                                var vvv = time.replace("/","")
                                var vvb = plan_stay_time.replace("/","")
                                var e = parseInt(vvv)
                                var m = parseInt(vvb)
                                if (e > m) {
                                    alert("选择正确的入住日期")
                                } else {
                                    $("#content").slideToggle()
                                    var time1 = Date.parse(new Date(plan_stay_time));
                                    var time2 = Date.parse(new Date(plan_leave_time));
                                    var nDays = Math.abs(parseInt((time2 - time1) / 1000 / 3600 / 24));//两个日期相隔天数

                                    $("#plan_stay_time").val(plan_stay_time)
                                    $("#plan_leave_time").val(plan_leave_time)
                                    $("#roomname").val(name)
                                    if (data.level_discount == '1.00') {
                                        $("#creditlevel").val("您是" + data.level_name + "不享受折扣")   //会员级别
                                    } else {
                                        $("#creditlevel").val("您是" + data.level_name + "享受" + data.level_discount + "折扣")   //会员级别
                                    }
                                    var discount = data.level_discount
                                    $("#finalprice").val((price * nDays * discount).toFixed(2))  //价格
                                    //$("#room_type_id").val(id)
                                }
                            }
                        }
                    }
                }
            })
        }

        function change() {
            var v = $("#pay_way  option:selected").val();
            if (v == 0) {
                $("#totalprice").val(($("#finalprice").val() * 0.95).toFixed(2))
            } else if (v == 1) {
                $("#totalprice").val($("#finalprice").val())
            } else if (v == 2) {
                $("#totalprice").val($("#finalprice").val())
            }
        }

        $(function () {
            //点击提交按钮
            $("#submit").click(function () {
                var v = $("#pay_way  option:selected").val();
                if (v == -1) {
                    alert("请选择支付方式！")
                } else {
                    var plan_stay_time = $("#plan_stay_time").val()    //计划住房时间
                    var plan_leave_time = $("#plan_leave_time").val()    //计划退房时间
                    var room_type_id = $("#room_type_id").val()//房间类型id
                    var pay_way = $("#pay_way  option:selected").val();//支付方式
                    var context = $("#context").val()   //留言
                    var total_price = $("#totalprice").val()    //总价格
                    $.ajax({
                        url: "/order/orderroom",
                        data: {
                            room_type_id: room_type_id,
                            plan_stay_time: plan_stay_time,
                            plan_leave_time: plan_leave_time,
                            pay_way: pay_way,
                            context: context,
                            total_price: total_price
                        },
                        success: function (data) {
                            if (data.indexOf('已经预定满了噢') == -1) {
                                if (pay_way == 0) {
                                    //线上支付，跳转支付宝
                                    alert("跳转支付宝咯，请在15分钟内完成付款哦，否则订单失效")
                                    //var newwindow = window.open("/pay/pay?out_trade_no=" + data + "&total_amount=" + total_price);
                                    //window.focus();
                                    location.href = "/pay/pay?out_trade_no=" + data + "&total_amount=" + total_price
                                } else if (pay_way == 1) {
                                    //线下支付
                                    alert("预定成功咯，请在入住时候付款")
                                    location.reload()
                                } else if (pay_way == 2) {
                                    //红包余额支付
                                    //发送ajax请求
                                    //alert("扣钱包里面的钱")
                                    var pwd = prompt("请输入您的支付密码：")
                                    if (pwd == null) {
                                        alert("您取消了输入密码")
                                    } else {
                                        $.ajax({
                                            url: "/order/paywallet",
                                            data: {
                                                total_price: total_price,
                                                user_password: pwd,
                                                order_num: data
                                            },
                                            success: function (data) {
                                                alert(data)
                                                location.reload()
                                            }
                                        })
                                    }
                                }
                            } else {
                                alert(data)
                                location.reload()
                            }

                        }
                    })


                }

            })
            //点击取消按钮
            $("#abolish").click(function () {
                $("#content").slideToggle()
            })
        })
    </script>

</head>
<body>

<div id="page">
    <!---header top---->
    <!---header top---->
    <div class="top-header" th:if="${#session}!=null">
        <div th:if="${#session.getAttribute('username') eq null} "><span th:include="front_header_top::html"></span>
        </div>
        <div th:if="${#session.getAttribute('username') ne null} "><span
                th:include="front_header_top_login::html"></span></div>
    </div>
    <div class="top-header" th:if="${#session}==null">
        <span th:include="front_header_top::html"></span>
    </div>
    <!--header--->
    <div id="space"></div>
    <header class="header-container">
        <div class="container">
            <div class="top-row">
                <div class="row">
                    <div class="col-md-2 col-sm-6 col-xs-6">
                        <div id="logo">
                            <!--<a href="index.html"><img src="images/logo.png" alt="logo"></a>-->
                            <a href="/indexs"><span>云廊</span>酒店</a>
                        </div>
                    </div>
                    <div class="col-sm-6 visible-sm">
                        <div class="text-right" style="border:1px solid red;">
                            <button type="button" class="book-now-btn">Book Now</button>
                        </div>

                    </div>
                    <div class="col-md-8 col-sm-12 col-xs-12 remove-padd">
                        <nav class="navbar navbar-default">
                            <div class="navbar-header page-scroll">
                                <button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle"
                                        type="button">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>

                            </div>
                            <div class="collapse navigation navbar-collapse navbar-ex1-collapse remove-space">
                                <ul class="list-unstyled nav1 cl-effect-10">
                                    <li><a data-hover="首页" href="/indexs"><span>首页</span></a></li>
                                    <li><a data-hover="关于" href="/about"><span>关于</span></a></li>
                                    <li><a data-hover="房间" href="/rooms"><span>房间</span></a></li>
                                    <li><a data-hover="画廊" href="/gallery"><span>画廊</span></a></li>
                                    <li><a data-hover="餐厅" href="/dinning"><span>餐厅</span></a></li>
                                    <li><a data-hover="新闻" href="/news"><span>新闻</span></a></li>
                                    <li><a data-hover="客服" href="/contact"><span>客服</span></a></li>
                                </ul>

                            </div>
                        </nav>
                    </div>
                    <div class="col-md-2  col-sm-4 col-xs-12 hidden-sm">
                        <div class="text-right"><a href="/rooms">
                            <button type="button" class="book-now-btn">立即预订</button>
                        </a></div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!--end-->
    <section class="image-head-wrapper" style="background-image: url('images/海滩1.jpg');">
        <div class="inner-wrapper">
            <h1></h1>
        </div>
    </section>
    <div class="clearfix"></div>

    <div class="single">
        <!-- start span1_of_1 -->
        <div class="left_content">
            <div class="span_1_of_left">
                <div class="grid images_3_of_2">
                    <ul id="etalage">
                        <tr th:each="roomTypePicture : ${roomTypePictures}"><!-- foreach(User user : users) -->
                            <li>
                                <img class="etalage_thumb_image img-responsive"
                                     th:src="@{${roomTypePicture.picture_name}}"/>
                                <img class="etalage_source_image img-responsive"
                                     th:src="@{${roomTypePicture.picture_name}}" title=""/>
                            </li>
                        </tr>
                    </ul>
                </div>
            </div>
        </div>
        <div class="right_content">
            <div class="roominfo"><span th:text="${roomType.room_type_name}">套房</span></div>
            <div class="roominfo">
                <div id="roomprice">
                    <del><span th:text="'￥'+${roomType.room_type_price}">￥2333</span></del>
                    <span th:text="'￥'+${#numbers.formatDecimal(roomType.room_type_price*roomType.room_type_discount,1,0)}"></span>
                </div>
                <div id="roomdiscount"><span
                        th:text="${#numbers.formatDecimal(roomType.room_type_discount*100, 2, 0)}+'%'">-10%</div>
            </div>
            <div class="roominfo"><span th:text="'剩余房间：'+${roomType.room_type_stock}">尚余房间：25</span></div>
            <div>
                <tr th:each="roomService : ${roomServices}"><!-- foreach(User user : users) -->
                    <div class="servcies"><span th:text="${roomService.service_id}"></span></div>
                </tr>
            </div>
        </div>
    </div>

    <!--预定弹出框-->

    <div class="porduct-order-agile" style="display: none;position: fixed;top: 15%;left:30%;z-index:4564;opacity: 1"
         id="content">
        <input type="hidden" id="room_type_id" th:value="${roomType.room_type_id}">
        <div class="form-group">
            <p>计划入住时间</p>
            <input type="text" id="plan_stay_time" name="name" placeholder="计划入住时间">
        </div>
        <div class="form-group">
            <p>计划退房时间 </p>
            <input type="text" id="plan_leave_time" placeholder="计划退房时间">
        </div>
        <div class="form-group">
            <p>预定留言</p>
            <input type="text" id="context" placeholder="若有需要，请留言">
        </div>

        <div class="order-list">
            <p>房间类型</p>
            <div class="main">
                <div class="form-order">
                    <input type="text" class="form-control buttom"
                           style="border:0.5px solid black;position: relative;top: 10px;"
                           disabled="disabled" id="roomname"/>
                </div>
                <div class="form-order">
                    <input type="text" class="form-control buttom"
                           style="border:0.5px solid black;position: relative;top: 10px;width: 190px"
                           disabled="disabled" id="creditlevel"/>
                    <!-- <input type="hidden" th:value="${userLevel.level_discount}" id="level_discount">-->
                </div>
                <div class="form-order">
                    <input type="text" class="form-control buttom"
                           style="border:0.5px solid black;position: relative;top: 10px;"
                           disabled="disabled" id="finalprice"/>
                </div>
            </div>
        </div>
        <div class="order-list">
            <p>请选择支付方式</p>
            <div class="main">
                <div class="form-order">
                    <select class="form-control buttom" id="pay_way" onchange="change()">
                        <option value="-1">---支付方式---</option>
                        <option value="0">线上支付(可另享95折优惠)</option>
                        <option value="1">线下到店支付</option>
                        <option value="2">钱包余额支付</option>
                    </select>
                </div>

                <div class="form-order">
                    <input type="text" class="form-control buttom"
                           style="border:0.5px solid black;position: relative;top: 10px;"
                           disabled="disabled" id="totalprice"/>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary" id="submit">提交预定</button>
        <button type="submit" class="btn btn-primary" id="abolish">取消</button>

    </div>


    <div id="roomdate">
        <div class="booking-section-1 container-fluid">
            <!-- Container -->
            <div class="container">
                <div class="col-md-4 col-sm-4 col-xs-6">
                    <div class="booking-content-block">
                        <h5>预订 <span>您的 房间</span></h5>
                    </div>
                </div>
                <div id="bookdate">
                    <div id="datepicker3" class="input-group col-md-3 col-sm-3 col-xs-12" style="float: left">
                        <input class="form-control datepicker" placeholder="入住时间"
                               th:id="stay_time+${roomType.room_type_id}" type="text">
                        <span class="input-group-addon add-on">
								<span class="glyphicon glyphicon-calendar"></span>
							</span>
                    </div>
                    <div id="datepicker4" class="input-group col-md-3 col-sm-3 col-xs-12">
                        <input class="form-control datepicker" placeholder="退房时间"
                               th:id="leave_time+${roomType.room_type_id}" type="text">
                        <span class="input-group-addon add-on">
								<span class="glyphicon glyphicon-calendar"></span>
							</span>
                    </div>

                    <a href="javascript:void (0)" title="现在预订" class="book-now"
                       th:onclick="orderthis([[${roomType.room_type_id}]],[[${roomType.room_type_name}]],[[${roomType.room_type_price}]]*[[${roomType.room_type_discount}]],[[${roomType.room_type_id}]])">现在预订</a>
                    <a href="javascript:void (0)" th:onclick="addcart([[${roomType.room_type_id}]])" title="加入购物车"
                       class="book-now">加入购物车</a>

                </div>
            </div><!-- Container /- -->
        </div><!-- Booking Section 1 -->
    </div><!-- Slider Section 2 /- -->
</div>


<div id="inputcomment">
    <div class="col-md-6 contact-form">
        <h3>全部<span>评论</span>(共有<span th:text="${commentPages.totalCount}">1998</span>条评论)</h3>

    </div>
</div>

<div id="autore"><!--评论局部刷新div-->
    <div id="comments">
        <tr th:each="comment : ${comments}"><!-- foreach(User user : users) -->
            <div class="comment">

                <div class="item active">
                    <div class="blog-box">
                        <p><span th:text="${comment.comment_context}">我很喜欢这个酒店</span></p>
                    </div>
                    <div class="blog-view-box">
                        <div class="media">
                            <div class="media-body">
                                <h3 class="media-heading blog-title"><span th:text="${user.user_name}">成龙</span></h3>
                                <h5 class="blog-rev"><span th:text="${user_level1.level_name}">我们尊贵的客户</span></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </tr>
    </div>


    <!-- 分页 -->
    <div id="commentpaging">
        <ul class="pagination">
            <li><a href="javascript:void(0)" id="firstpage"><<</a></li>
            <li><a href="javascript:void(0)" id="prepage"><</a></li>
            <li><a href="javascript:void(0)"><span id="currentpage" th:text="${commentPages.currentPage}"></span>/<span
                    id="totalpage" th:text="${commentPages.totalPage}"></span></a></li>
            <li><a href="javascript:void(0)" id="nextpage">></a></li>
            <li><a href="javascript:void(0)" id="lastpage">>></a></li>
        </ul>
    </div>
</div>

<!---footer--->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12 width-set-50">
                <div class="footer-details">
                    <h4>联系方式</h4>
                    <ul class="list-unstyled footer-contact-list">
                        <li>
                            <i class="fa fa-map-marker fa-lg"></i>
                            <p>中国海南省三亚市海棠湾海棠北路701号</p>
                        </li>
                        <li>
                            <i class="fa fa-phone fa-lg"></i>
                            <p><a href="tel:+1-202-555-0100"> +1-202-555-0100</a></p>
                        </li>
                        <li>
                            <i class="fa fa-envelope-o fa-lg"></i>
                            <p><a href="mailto:demo@info.com"> demo@info.com</a></p>
                        </li>
                    </ul>
                    <div class="footer-social-icon">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-instagram"></i></a>
                        <a href="#"><i class="fa fa-google-plus"></i></a>
                        <a href="#"><i class="fa fa-youtube-play"></i></a>
                    </div>
                    <div class="input-group" id="subscribe">
                        <input type="text" class="form-control subscribe-box" value="" name="subscribe"
                               placeholder="EMAIL ID">
                        <span class="input-group-btn">
		                            <button type="button" class="btn subscribe-button"><i
                                            class="fa fa-paper-plane fa-lg"></i></button>
		                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12 width-50 width-set-50">
                <div class="footer-details">
                    <h4>浏览</h4>
                    <ul class="list-unstyled footer-links">
                        <li><a data-hover="首页" href="/index"><span>首页</span></a></li>
                        <li><a data-hover="关于" href="/about"><span>关于</span></a></li>
                        <li><a data-hover="房间" href="/rooms"><span>房间</span></a></li>
                        <li><a data-hover="画廊" href="/gallery"><span>画廊</span></a></li>
                        <li><a data-hover="餐厅" href="/dinning"><span>餐厅</span></a></li>
                        <li><a data-hover="新闻" href="/news"><span>新闻</span></a></li>
                        <li><a data-hover="客服" href="/contact"><span>客服</span></a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6 col-sm-12 col-xs-12">
                <div class="footer-details">
                    <h4>Now On Instagram</h4>
                    <div class="row">
                        <div class="instagram-images">
                            <div id="instafeed"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="copyright">
            &copy; 2017 All right reserved. Designed by <a href="#" target="_blank">ThemeVault.</a>
        </div>

    </div>
</footer>

<!--back to top--->
<a style="display: none;" href="javascript:void(0);" class="scrollTop back-to-top" id="back-to-top">
    <span><i aria-hidden="true" class="fa fa-angle-up fa-lg"></i></span>
    <span>Top</span>
</a>
</body>
</html>
